<template>
	<div class="totalStyle contractinfo_box">
		<div class="tablestyle">
			<div class="titleStyle">
				<p class="leftTitle font_w">大船规范</p>
				<div>
					<el-button type="primary" :loading="exportLoading" @click="handleExport">导出数据</el-button>
					<el-button type="primary" @click="handleBuild">新建</el-button>
				</div>
			</div>
			<div class="bottomBox">
				<div class="searchsize">
					<el-row :gutter="24" style="width: 100%;" class="searchBox flex">
						<el-col :span="4">
							<el-input v-model="queryParams.shipName" placeholder="请输入船名" clearable />
						</el-col>
						<el-col :span="4">
							<!-- <el-select v-model="queryParams.tugTypeCode" placeholder="请选择船舶类型">
								<el-option v-for="item in selects.tugTypeCode" :key="item.value" :label="item.label"
									:value="item.value" />
							</el-select> -->
							<Select placeholder="请选择船舶类型" :dataConfig="{ params: { type: 'DICT',dictType:'SHIP_KIND' } }" v-model:value="queryParams.shipKindCode" v-model:label="queryParams.shipKindName"/>
						</el-col>
						<el-col :span="4">
							<!-- <el-select v-model="queryParams.notionCode" placeholder="请选择船舶国籍名称">
								<el-option v-for="item in selects.notionCode" :key="item.value" :label="item.label"
									:value="item.value" />
							</el-select> -->
							<Select placeholder="请选择船舶国籍名称" :dataConfig="{ params: { type: 'DICT',dictType:'SHIP_NATION' } }" v-model:value="queryParams.notionCode" v-model:label="queryParams.nationName"/>
						</el-col>
						<el-col :span="4">
							<el-button type="info" plain @click="reset">重置</el-button>
							<el-button type="primary" plain class="searchbutton" @click="search">查询</el-button>
						</el-col>
					</el-row>
				</div>
				<div class="chartstyle">
					<el-table :data="tableData" :header-cell-style="{ background: '#F2F5FA' }" border
						style="width: 100%;">
						<el-table-column prop="shipName" label="船名" :width="130" fixed="left" />
						<el-table-column prop="shipNameEn" label="英文船名" :width="120" />
						<el-table-column prop="shipKindName" label="船舶类型" :width="100" />
						<el-table-column prop="nationName" label="船舶国籍名称" :width="120" />
						<el-table-column prop="imo" label="IMO" :width="100" />
						<el-table-column prop="callNo" label="呼号" :width="80" />
						<el-table-column prop="mmsi" label="MMSI" :width="120" />
						<el-table-column prop="shipLength" label="船长" :width="80" />
						<el-table-column prop="shipWidth" label="船宽" :width="80" />
						<el-table-column prop="totalTon" label="总吨" :width="80" />
						<el-table-column prop="netTon" label="净吨" :width="80" />
						<el-table-column prop="dwt" label="载重吨" :width="80" />
						<el-table-column prop="hatchNum" label="舱口数" :width="80" />
						<el-table-column prop="speed" label="航速" :width="80" />
						<el-table-column prop="shipPhone" label="船上电话" :width="120" />
						<el-table-column label="操作列" width="120" fixed="right" align="center">
							<template #default="scope">
								<span class="buttonFun cursor" @click="handleEdit(scope.row)">编辑</span>
								<el-popconfirm width="520" confirm-button-text="确定" cancel-button-text="取消"
									@confirm="handleDelete(scope.row)" title="你确定要删除这条数据吗?">
									<template #reference>
										<span class="buttonFun cursor">删除</span>
									</template>
								</el-popconfirm>
							</template>
						</el-table-column>
						<template #empty>
							<el-empty v-loading="tableLoading"></el-empty>
						</template>
					</el-table>
					<div class="demo-pagination-block">
						<el-pagination :current-page="queryParams.startPage" :page-size="queryParams.pageSize"
							:page-sizes="[5, 10, 15, 20]" :background="background"
							layout="total, sizes, prev, pager, next, jumper" :total="total"
							@size-change="handleSizeChange" @current-change="handleCurrentChange" />
					</div>
				</div>
			</div>
		</div>
		
		<!-- 详情 -->
		<Detail ref="detailRef" @callback="queryTableData(queryParams)"></Detail>
		<Export :dialogVisible="dialogVisible" @close="dialogVisible = false" @upload="upload" />
	</div>
</template>

<script setup name="ship">
	import api from '@/api/basicData/ship/index'
import Select from '@/components/Select/index.vue'
import Detail from './component/detail.vue'
import Export from '@/components/export/index.vue'
import { exportFile } from "@/utils/fileUtils";
import { ElMessage, ElMessageBox,ElNotification } from "element-plus";
	import {
		ref,
		onMounted
	} from "vue";
const detailRef = ref(null) // 明细组件ref
	const tableLoading = ref(false)
	const total = ref(0)
	const tableData = ref()
	const selects = ref({
		notionCode: [{
				label: '中国',
				value: 0
			},
			{
				label: '美国',
				value: 1
			},
			{
				label: '德国',
				value: 2
			}
		],
		tugTypeCode: [{
				label: '适航',
				value: 0
			},
			{
				label: '不适航',
				value: 1
			},
			{
				label: '停修',
				value: 2
			}
		]
	})
	const queryParams = ref({
		shipName:'',
		tugTypeCode:'',
		notionCode:'',
		startPage: 1,
		pageSize: 10
	})

	//新增
	const handleBuild = () => {
		detailRef.value.show({
		  mode: 'add'
		})
	}
	//重置
	const reset = () => {
		queryParams.value = {
			shipName:'',
			tugTypeCode:'',
			notionCode:'',
			startPage: 1,
			pageSize: 10
		}
		queryTableData(queryParams.value)
	}
	//编辑
	const handleEdit = (row) => {
		detailRef.value.show({
		  mode: 'edit',
		  row:row
		})
	}
	//删除
	const handleDelete = (row) => {
		api.remove({
			ids: row.id
		  })
		  .then(res => {
			if (res.code === 200) {
			  ElMessage.success('删除成功')
			  queryTableData(queryParams.value)
			} else {
			  ElMessage.error(res.msg)
			}
		  })
	}
	//切换一页显示多少条数据
	const handleSizeChange = (val) => {
		queryParams.value.pageSize = val;
		queryTableData(queryParams.value);
	};
	// 点击跳转到第几页
	const handleCurrentChange = (val) => {
		queryParams.value.startPage = val;
		queryTableData(queryParams.value);
	};
	//查询
	const search = () => {
		queryParams.value.startPage = 1
		queryParams.value.pageSize = 10
		queryTableData(queryParams.value)
	}
	//查询
	const queryTableData = (e) => {
		tableLoading.value = true
		queryParams.value = e
		api.getList(queryParams.value).then(res => {
			tableLoading.value = false
			tableData.value = res.data?.records || []
			total.value = res.data?.total || 0
		})
	}
	onMounted(() => {
		queryTableData(queryParams.value)
	})
	// 导出数据
	const exportLoading = ref(false)
	const handleExport = () => {
		exportLoading.value = true;
		var params = JSON.parse(JSON.stringify(queryParams.value))
		params.pageSize = 1000
		api.exportData(params).then(res=>{
			exportFile(res.data,'船舶导出','xlsx')
		}).then(_=>{
			setTimeout(function(){
				exportLoading.value = false;
			},300)
		})
	}
	const dialogVisible = ref(false)
	// 导入数据
	const handleUpload = () => {
		dialogVisible.value = true;
	}
	const upload = (formData) => {
		api.importData(formData).then(response => {
		  if (response.code === '200' || response.code === 200) {
		    ElMessage({
		      message: '导入成功',
		      type: 'success'
		    })
		  }
		})
	}
	// 下载模板
	const handleDownload = () => {
		api.exportTemplate().then(res=>{
			exportFile(res.data,'船舶模板','xlsx')
		})
	}
</script>
<style lang='less' scoped>
	.tablestyle {
		position: relative;

		.inputBox {
			:deep(.el-input) {
				width: 200px;
			}
		}

		:deep(.el-table__header thead tr) {
			background-color: rgba(64, 158, 255, 0.1);
		}

		:deep(.el-col-3) {
			max-width: none;
		}
	}

	.contractinfo_box {
		:deep(.el-table--fit) {
			height: 100%;
		}

		:deep(.el-table__body-wrapper) {
			overflow-y: auto;
		}

		.tablestyle {
			position: relative;

			:deep(.el-table__header thead tr) {
				background-color: rgba(64, 158, 255, 0.1);
			}

			:deep(.el-col-3) {
				max-width: none;
			}
		}

		:deep(.customer-no-border-table .el-table--border, .el-table--group) {
			border: none;
		}

		.demo-pagination-block {
			margin-top: 16px;
			position: absolute;
			bottom: 32px;
			right: 32px;
		}

		.buttonFun {
			color: #2E83FC;
			font-size: 14px;
			margin-right: 8px;
		}

		.sircle {
			width: 6px;
			height: 6px;
			border-radius: 50%;

			display: inline-block;
			margin-bottom: 3px;
		}

		.blue {
			background-color: #2E83FC;
		}

		.green {
			background-color: #54B831;
		}

		.origin {
			background-color: #FFB929;
		}

		.origin_deep {
			background-color: #FF9458;
		}

		.red {
			background-color: #F46B5A
		}

		.bottomBox {
			padding: 16px;
			height: calc(100% - 48px);
		}
	}
</style>